<template>
  <div>

	  <div id="editor">
		  <textarea :value="input" @input="update"></textarea>
		  <div v-html="compiledMarkdown"></div>
	  </div>

  </div>
</template>
<script>
	import _ from 'lodash'
	import marked from 'marked'

	export default{
		name: 'editor',
	  data () {
	    return{
	      input: '# hello'
	    }
	  },
		computed: {
	  	compiledMarkdown () {
	  		return marked(this.input, { sanitize: true })
		  }
		},
		methods: {
			update: _.debounce(function (e) {
				console.log(e)
				this.input = e.target.value
			}, 300)
		},
		components: {
			marked
		}
	}
</script>

<style>
	#editor {
		margin: 0;
		height: 100%;
		font-family: 'Helvetica Neue', Arial, sans-serif;
		color: #333;
	}
	textarea {
		border: none;
		border-right: 1px solid #ccc;
		resize: none;
		outline: none;
		background: #f6f6f6;
		font-size: 14px;
		font-family: 'Monaco', courier monospace;
		padding: 20px;
	}
	code {
		color: red;
	}








</style>






































